<template>
    <ul>
      <li v-for="msg in messageItem" :key="msg.id">
        <!-- <router-link :to="`/home/message/detail/${msg.id}?title=${msg.title}`">{{msg.title}}</router-link> -->
        <router-link :to="{name: 'detail', params: {mid: msg.id}, query: {title: msg.title}}">{{msg.title}}</router-link>
        <button @click="pushShow(msg)">push</button>
        <button @click="replaceShow(msg)">replace</button>
      </li>
      <!-- 显示组件 -->
      <router-view></router-view>
    </ul>
</template>

<script>
export default {
  data() {
    return {
      messageItem: []
    }
  },
  mounted() {
    setTimeout(() => {
      const message = [
        {id: 1, title: 'message001'},
        {id: 2, title: 'message002'},
        {id: 3, title: 'message003'},
        {id: 4, title: 'message004'}
      ]

      this.messageItem = message
    }, 1000);
  },
  methods: {
    pushShow(msg) {
      // 编程式导航
      this.$router.push(`/home/message/detail/${msg.id}?title=${msg.title}`)
    },
    replaceShow(msg) {
      this.$router.replace(`/home/message/detail/${msg.id}?title=${msg.title}`)
    }
  }
}
</script>

<style scoped>
</style>